<template>
	<view class="tn-flex tn-flex-column">
		<view class="tn-mb-lg">
			<view class="tn-pb-0">
				<tn-search-box v-model="params.keyword" @search="getDeliveryOrderList" @clear="getDeliveryOrderList"
					search-button-bg-color="#F8F7F8" placeholder="请输入订单号搜索" search-button-text-color="#AAAAAA" />
			</view>
			<view class="tn-flex gap-2 tn-mt">
				<tn-input right-icon="right" v-model="orderStatus" type="select" placeholder="请选择订单状态"
					@click="openOrderPicker=true" />
				<view class="tn-flex gap-2">
					<tn-button width="120" @click="getDeliveryOrderList">查询</tn-button>
					<tn-button width="120" type="info" @click="reset">重置</tn-button>
				</view>
			</view>
		</view>
		<loading v-if="isLoading" style="height: 70vh;"></loading>
		<view class="empty" v-else-if="deliveryList.length==0">
			<image
				src="https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2025/02/a0c4966b-11af-4c87-93aa-359f9c03d89f83ee61eba8e363790692eb5fd8a98de7.png"
				mode="widthFix"></image>
			<text>这里空空荡荡，啥也没有留下</text>
		</view>
		<view v-else>
			<view class="tn-radius card_item tn-p-sm tn-w-full" v-for="item in deliveryList" :key="item.id"
				@click="goOrderDetailPage(item)">
				<view class="tn-flex items-center justify-between gap-2">
					<view class="tn-flex items-center tn-flex-1">
						<tn-title :title="item.to_name" mode="hLine" assist-color="tn-blue" size="lg" />
					</view>
					<view :style="[{color:statusMap[item.status]},'width:115rpx;text-align:right']">
						{{item.status_text}}
					</view>
				</view>
				<view class="tn-flex tn-flex-column justify-around tn-mt-sm">
					<text class="tn-mt-xs tn-text-ellipsis-1">
						<text>采购商家：</text>
						<text class="tn-text-sm">{{item.seller_name}}</text>
					</text>
					<text class="tn-mt-xs tn-text-ellipsis-1">
						<text>配送商家：</text>
						<text class="tn-text-sm">{{item.delivery_name}}</text>
					</text>
					<text class="tn-mt-xs">
						<text>收货地址：</text>
						<text class="tn-text-sm">{{item.to_address}}</text>
					</text>
					<view class="tn-mt-xs tn-flex gap-2">
						<view class="">
							<text>商品总额：</text>
							<text class="tn-text-sm">{{item.price}} 元</text>
						</view>
					</view>
				</view>
				<view class="tn-flex justify-between items-center tn-pt-sm tn-mt-sm tn-border-top tn-gray-light_border">
					<text class="tn-text-xs tn-type-info_text">{{item.add_time}}</text>
					<view class="">
						<text class="tn-mr-xs tn-text-xs tn-type-info_text">查看详情</text>
						<tn-icon name="right" size="26" offset-top="1px" />
					</view>
				</view>
			</view>
			<view class="tn-pt-sm tn-pb-sm tn-flex-center">
				<uni-pagination :total="total" :current="params.page" :pageSize="params.limit" @change="changePage" />
			</view>
		</view>
	</view>
	<tn-modal ref="modalRef" />
	<tn-picker v-model="params.status" v-model:open="openOrderPicker" :data="pickerOrderData"
		@confirm="confirmPicker" />
</template>

<script setup>
	import {
		onMounted,
		ref,
	} from 'vue'
	import {
		getDeliveryOrderListApi,
	} from "@/request/worktop/system.js"

	onMounted(() => {
		getDeliveryOrderList()
	})

	const isLoading = ref(true)

	const openOrderPicker = ref(false)
	const pickerOrderData = [{
		label: '已下单',
		value: '0'
	}, {
		label: '已接单',
		value: '1'
	}, {
		label: '配送中',
		value: '3'
	}, {
		label: '已取消',
		value: '4'
	}, {
		label: '已完成',
		value: '5'
	}, {
		label: '售后',
		value: '6'
	}]

	const statusMap = {
		0: '#333333',
		4: '#FF444F',
		1: '#FBBD12',
		5: '#01BEFF',
		3: '#00D886',
		6: '#FF5722',
	}

	const orderStatus = ref('')

	const modalRef = ref()
	const formRef = ref()

	const deliveryList = ref([])
	const params = ref({
		page: 1,
		limit: 10,
		status: '',
		keyword: ''
	})
	const total = ref(0)

	// 获取配送订单列表
	const getDeliveryOrderList = () => {
		isLoading.value = true
		getDeliveryOrderListApi(params.value).then(res => {
			if (res.code == 0) {
				deliveryList.value = res.data
				total.value = res.other.total
			}
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon: 'none'
			})
		}).finally(() => {
			setTimeout(() => {
				isLoading.value = false
			}, 500)
		})
	}
	// 确定选择来源
	const confirmPicker = (_, item) => {
		orderStatus.value = item.label
	}
	// 重置按钮
	const reset = () => {
		orderStatus.value = ''
		params.value.status = ''
		params.value.keyword = ''
		getDeliveryOrderList()
	}
	// 更新页码
	const changePage = (e) => {
		params.value.page = e.current
		getDeliveryOrderList()
	}
	// 跳转订单详情
	const goOrderDetailPage = (item) => {
		let obj = {
			item,
			type: 'delivery'
		}
		uni.navigateTo({
			url: '/pages_worktop/orderDetail/orderDetail?obj=' + encodeURIComponent(JSON.stringify(obj))
		})
	}
</script>

<style scoped lang="scss">
</style>